<!DOCTYPE html>
<html>
<head>
    <title>首页</title>
    <meta charset="UTF-8">
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vuejs-2.5.16.js"></script>

    <style>
        input, button {
            height: 25px;
            margin-top: 10px;
            width: 250px;
        }

        form {
            height: 300px;
        }
    </style>
</head>
<body>

<h1>欢迎回来首页</h1>

<div id="app">
    <form>
        boss火:<input type="text" v-model="boss.bfire"><br>
        boss电:<input type="text" v-model="boss.belectricity"><br>
        boss土:<input type="text" v-model="boss.bsoil"><br>
        boss冰:<input type="text" v-model="boss.bice"><br>
        宠物火:<input type="text" v-model="boss.pfire"><br>
        宠物电:<input type="text" v-model="boss.pelectricity"><br>
        宠物土:<input type="text" v-model="boss.psoil"><br>
        宠物冰:<input type="text" v-model="boss.pice"><br>
        宠物克制:<input type="text" v-model="boss.prestrain"><br>
        <button @click="calculate()" type="button">计算伤害加成效果</button>
        <br>
        <input style="border: 1px solid yellowgreen" v-model="mesg1"><br>
        <button @click="counter()" type="button">计算最高伤害的宠物属性</button>
        <br>
        <input style="border: 1px solid deeppink" v-model="mesg2">
    </form>
</div>

</body>

<script>

    new Vue({
        el: "#app",
        data: {
            mesg1: "",
            mesg2: "",
            boss: {
                bfire: "",
                belectricity: "",
                bsoil: "",
                bice: "",
                pfire: "",
                pelectricity: "",
                psoil: "",
                pice: "",
                prestrain: ""
            }
        },
        methods: {
            calculate: function () {
                var _this = this;
                // alert(_this.boss.belectricity);
                axios.post("calculate.do", _this.boss)
                    .then(function (value) {
                        _this.mesg1 = value.data.message;
                    })
            },
            counter: function () {
                var _this = this;
                 axios.post("counter.do",_this.boss)
                     .then(function (value) {
                         _this.mesg2=value.data.message;
                     })
            }
        }
    })

</script>

</html>
